<!DOCTYPE html>
<!-- ng-app -->
<html lang="en" ng-app="isolateScope">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="../../js/plugins/angular/angular.min.js" type="text/javascript"></script>
</head>
<body>
    <!-- 示例九：双向绑定示例
         双向绑定赋予 AngularJS 孤立作用域与外界最为自由的双向数据通信功能。
            在双向绑定模式下，孤立作用域能够直接读写父作用域中的属性和数据。
            和以上两种孤立作用域定义数据绑定一样，双向绑定也必须在父作用域的 HTML 中设定属性节点来绑定。

         双向绑定非常适用于一些子 directive 需要频繁和父作用域进行数据交互，并且数据比较复杂的场景。
            不过，由于可以自由的读写父作用域中的属性和对象，所以在一些多个 directive 共享父作用域数据的场景下需要小心使用，
            很容易引起数据上的混乱。
     -->
    <div ng-controller="ctrl">
        <button>{{btns.dw}}</button><!-- DeveloperWorks -->
        <button>{{btns.name}}</button><!-- nick -->
        <div isolate-directive isolates="btns"></div><!-- {"name":"nick","dw":"DeveloperWorks"} -->
    </div>

    <script>
        angular.module('isolateScope', [])
            .controller("ctrl", function ($scope) {
                $scope.btns = {
                    name : 'nick',
                    dw : 'DeveloperWorks'
                };
            })
            .directive("isolateDirective", function () {
                return {
                    replace : true,
                    template: '<button>{{isolates}}</button>',
                    scope : {
                        isolates : '=',
                    },
                    link : function($scope, $element, $attr) {
                        $scope.isolates.name = "NICK";
                    }
                };
            });

    </script>
</body>
</html>